<template>
    <div>
        <div class="fresh">
            <div class="flower" @click="flower(item.type)"  v-for="(item,ins) in str" :key="ins">
                <img :src="item.img" alt="">
                <p>{{item.name}}</p>
            </div>

        </div>
        <!--  <div class="forever">
                <p v-> 鲜花</p>
                <p> 巧克力</p>
                <p> 蛋糕</p>
                <p> 玫瑰花束</p>
                <p> 水果</p> 
            </div> -->
    </div>
</template>

<script>
import { getType } from "../api/classify";
    export default {
        data() {
            return {
                str:[
                  
                ]
            }
        },
        methods:{
            flower(names){
                this.$router.push({
                    path:"/list",
                    query:{
                        names:names
                    }
                })
            },
             getTab(){
             getType().then(res=>{
                this.str = res.data
                console.log(this.str);
             })   
            }
        },
        mounted() {
            this.getTab()
        }
    }
</script>

<style scoped>
    .fresh{
        width: 100%;
        height: 12vh;
       
        margin-top: 2.5vh;
        display: flex;
        justify-content: center;
    }
    .flower{
        width: 10vh;
        height: 10vh;
        background: royalblue;
        margin: 1vh 0.5vh ;
        
    }
   /*  .forever{
         display: flex;
         justify-content: center;
         font-size: 2vh;
    }
    .forever p{
         margin: 0 2.7vh;
    } */
    .flower >img{ width: 10vh;
        height: 10vh;}
  
</style>